"use client";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useActionState } from "react";
import { submitAddress } from "../actions/fetchPosts";
import { Button } from "@/components/ui/button";

const initialState: ActionResponse = {
  success: false,
  message: "",
};
export default function AddressForm() {
  const [state, action, isPending] = useActionState(
    submitAddress,
    initialState
  );
  return (
    <Card className="flex flex-col items-center gap-4">
      <h2 className="text-2xl font-bold">Action State</h2>
      <CardHeader>
        <CardTitle>Action State</CardTitle>
        <CardDescription>
          This is a simple example of how to use action state in a form.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form action={action} className="spage-y-6" autoComplete="on">
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="address">Street Address</Label>
              <Input
                id="address"
                name="address"
                defaultValue={state.inputs?.address}
                autoComplete="street-address"
                aria-describedby="street-address"
                className={state?.errors?.address ? "border-red-500" : ""}
                type="text"
              />
              {state?.errors?.address && (
                <p className="text-red-500">{state?.errors?.address[0]}</p>
              )}
            </div>
            <div className="space-y-2">
              <Label htmlFor="city">City</Label>
              <Input
                id="city"
                name="city"
                defaultValue={state.inputs?.city}
                className={state?.errors?.city ? "border-red-500" : ""}
                type="text"
              />
              {state?.errors?.city && (
                <p className="text-red-500">{state?.errors?.city[0]}</p>
              )}
            </div>
            <div className="space-y-2">
              <Label htmlFor="zipCode">Zip Code</Label>
              <Input
                id="zipCode"
                name="zipCode"
                type="text"
                defaultValue={state.inputs?.zipCode}
                className={state?.errors?.zipCode ? "border-red-500" : ""}
              />
              {state?.errors?.zipCode && (
                <p className="text-red-500">{state?.errors?.zipCode[0]}</p>
              )}
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="state">State</Label>
                <Input
                  id="state"
                  defaultValue={state.inputs?.state}
                  className={state?.errors?.state ? "border-red-500" : ""}
                  name="state"
                  type="text"
                />
                {state?.errors?.state && (
                  <p className="text-red-500">{state?.errors?.state[0]}</p>
                )}
              </div>
              <div className="space-y-2">
                <Label htmlFor="country">Country</Label>
                <Input
                  id="country"
                  defaultValue={state.inputs?.country}
                  name="country"
                  type="text"
                />
              </div>
            </div>
          </div>
          <Button type="submit" disabled={isPending}>
            保存
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}
